<template>
  <div id="Survey">
    <div class="left">
      <div class="leftBar">
        <ul class="survey_ul">
          <router-link v-for= "item in items" :to="item.url" :key="item.id">
            <li class="survey_li" style="font-size:1.1rem">{{item.name}}</li>
          </router-link>
        </ul>
      </div>
      <ContactUs/>
    </div>
    <div class="content">
      <div class="position-div">
        <span>■ 历史沿革</span>
        <span>当前位置：首页 >> 工商联概况 >> 历史沿革</span>
      </div>
      <div class="page-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import baseConfig from 'baseConfig'
import ContactUs from '../common/ContactUs'
import $ from 'Jquery'
import {Storage} from '../../publicLib/utils-lib/main'

let localStorage = new Storage('localStorage');

export default {
  name: 'Survey',
  data () {
    return {
      items: baseConfig.leftbar_kgmap,
      contact_map: baseConfig.contact_map,
      pageName: '工商联简介'
    }
  },
  components: {
    ContactUs
  },
  methods: {
    /* 设置导航栏选中状态 */
    navSelectHandle () {
      $('.survey_ul li').eq(0).addClass('select');
      $('.survey_ul li').each(function (index) {
        $(this).click(function () {
          $('.survey_ul li').removeClass('select');
          $('.survey_ul li').eq(index).addClass('select');
          //记录当前导航栏索引值
          localStorage.setItem('surveyIndex', index);
        })
      })
    },
    /* 刷新浏览器后导航栏重定位 */
    redirctBar () {
      let curIndex = localStorage.getItem('surveyIndex');

      if (curIndex) {
        $('.survey_ul li').each(function (index) {
          let dom = $('.survey_ul li');
          dom.removeClass('select');
          if (index === parseInt(curIndex)) {
            dom.eq(index).addClass('select');
            return false;
          }
        })
      }
    },
    /* 查询路由跳转的是哪个子页面 */
    getSonPageNameByTo:function (to){
      switch (to.name) {
        case 'BriefIntroduction':
          return '工商联简介';
        case 'Duty':
          return '工商联职责';
        case 'Leader':
           return '现任领导';
         case 'InstitutionSetting':
           return '机构设置';
         case 'ChamberStatute':
           return '商会章程';
         case 'History':
           return '历史沿革';
         case 'SuccessiveLeaders':
           return '历任领导';
         default:
           return ''
      }
    }
  },
  mounted () {
    this.navSelectHandle();
    this.redirctBar();
  },
  /* 页面销毁时清除缓存 */
  destroyed () {
    localStorage.removeItem('surveyIndex')
  },
  watch: {
    /* 监听路由 */
    $route(to, from) {
      this.pageName = this.getSonPageNameByTo(to);
    }
  }

}
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

  .select{
    background-color: $contect-us-color;
    color: white;
  }

  #Survey {
    position: relative;
    display: flex;
    align-items: left;
    background-color: white;
    min-height: 25rem;

    .left{
      width: 18%;
      float: left;
      display: inline-block;
      .leftBar {
        background-color: $more-title-color;

        .survey_ul{

          li{
            list-style-type: none;
            padding: 0.8rem 2rem;
            border-bottom: 1px dotted $border-color-2;
            color: white;

            &:hover{
              color: $border-color-2;
            }
          }
        }
      }
    }

    .content {
      width: 80%;
      padding: 1rem;
      clear: both;
      position: relative;
      display: inline-block;
      top: 0;
      padding-bottom: 100px;

      .position-div{
        width: 100%;
        text-align: left;
        border-bottom: 1px dotted $border-color-2;

        span:first-child{
          color:$contect-us-color;
          font-weight: bold;
          font-size: 1.1rem;
        }

        span:nth-child(2){
          float: right;
          font-size: $font-size-default;
        }
      }

      .page-content{
        clear: both;
        margin: 1rem;
      }
    }
  }
</style>
